<template>
  <view class="artworks-list-item-container">
    <view
      v-for="(item, index) in artworksList"
      :key="item.id"
      class="artworks-item"
      @click="handleArtworks(item, index)">

      <view class="artworks-item-content">
        <view>
          <u-image
            width="150rpx"
            height="150rpx"
            :lazy-load="true"
            :fade="false"
            :border-radius="8"
            :show-menu-by-longpress="false"
            :src="item.thum_url || item.cover_url"
            class="image">
            <u-loading slot="loading" color="#56d39d" size="36"></u-loading>
          </u-image>
        </view>
        <view class="artworks-item-info">
          <view class="tool-name">{{ item.title }}</view>
          <view class="tool-desc">{{ item.desc }}</view>
          <view>
            <u-icon name="download" size="28"></u-icon>
            <text style="padding-left: 6rpx">{{ item.download_num || 0 }}</text>
          </view>
        </view>
        <view class="btn-container" @click="handleToolItem(item)">
          <!-- <text>{{ item.btn_txt || '立即制作' }}</text> -->
          <text>我要推广</text>
        </view>
      </view>

      <image
        v-if="isBatch && !item.checked"
        src="@/static/icon/unchecked.png"
        mode="scaleToFill"
        class="checkbox"
      />
      <image
        v-else-if="isBatch && item.checked"
        src="@/static/icon/checked.png"
        mode="scaleToFill"
        class="checkbox"
      />
      <!-- 置顶 -->
      <view v-if="item.is_top === '1' && !isAlbum" class="is_top">
        <text>置顶</text>
      </view>
      <!-- 置顶 -->
      <view v-if="item.album_top === '1' && isAlbum" class="is_top">
        <text>置顶</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    artworksList: {
      type: Array,
      default: () => {
        return []
      }
    },
    isBatch: {
      type: Boolean,
      default: false
    },
    isAlbum: {
      type: Boolean,
      default: false
    },
    showMake: {
      type: String,
      default: '0'
    }
  },
  data() {
    return {
      name: '列表'
    }
  },
  methods: {
    // 点击作品
    handleArtworks(rowDta, index) {
      if (!this.isBatch) {
        this.$emit('handleArtworks', rowDta);
        return;
      }
      this.$emit('handleCheckBox', index);
    },

    // 点击
    handleToolItem(item) {
      if (this.showMake == '0') {
        this.$emit('handleToolItem', item.tid);
      } else {
        this.$emit('handleToolItem', item);
      }
    },
  }
}
</script>

<style lang="scss">
  .artworks-list-item-container{

    .artworks-item{
      padding: 12rpx 0;
      width: 100%;
      height: 180rpx;
      margin-bottom: 24rpx;
      position: relative;
      border-radius: 16rpx;
      overflow: hidden;
      background-color: #f8f8f8;
      border: 1rpx solid #eaeaea;

      .checkbox{
        width: 50rpx;
        height: 50rpx;
        position: absolute;
        right: 10rpx;
        top: 10rpx;
      }

      .is_top{
        text-align: center;
        width: 70rpx;
        height: 36rpx;
        line-height: 36rpx;
        position: absolute;
        font-size: 24rpx;
        left: 0;
        top: 0;
        color: #fff;
        border-radius: 6rpx;
        background-color: $uni-color-primary2;
      }

      .artworks-item-content{
        padding: 0 12rpx;
        display: flex;
        align-items: center;
      }
      
      .artworks-item-info{
        padding-left: 24rpx;
        padding-right: 12rpx;
        flex: 1;
      }
    }

    .tool-name{
      width: 320rpx;
      font-size: 30rpx;
      height: 60rpx;
      line-height: 60rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 12rpx;
      overflow: hidden; // 超出一行文字自动隐藏
      text-overflow: ellipsis; // 文字隐藏后添加省略号
      white-space: nowrap; // 强制不换行
    }

    .tool-desc{
      width: 320rpx;
      font-size: 24rpx;
      color: #666;
      margin-bottom: 12rpx;
      height: 36rpx;
      overflow:hidden; // 超出一行文字自动隐藏
      text-overflow:ellipsis; // 文字隐藏后添加省略号
      white-space:nowrap; // 强制不换行
    }

    .btn-container{
      height: 48rpx;
      line-height: 48rpx;
      text-align: center;
      max-width: 140rpx;
      min-width: 140rpx;
      font-size: 24rpx;
      background-color: $uni-color-primary;
      color: #fff;
      font-size: 24rpx;
      border-radius: 24rpx;
    }
  }
</style>
